<template>
  <div class="container">
    <a-card class="general-card" :title="$route.meta.locale">
      <table-search
        v-permission="'system:dict:query'"
        :fileds="searchFileds"
        @search="search"
        @reset="search"
      ></table-search>
      <xTable
        v-model:refresh="refresh"
        v-model:selected-keys="selectedKeys"
        :params="params"
        :columns="tableColumns"
        row-key="dictId"
        :http="{
          list: getListData,
          del: delType,
          exported: dictType,
          batchDel: delType,
        }"
        :http-permission="{
          del: 'system:dict:remove',
          exported: 'system:dict:export',
        }"
      >
        <template #operation-default>
          <div v-permission="'system:dict:add'" class="item">
            <a-button type="outline" @click="editOpen(null)"> 新增 </a-button>
          </div>
          <div v-permission="'system:dict:edit'" class="item">
            <a-button
              type="outline"
              status="success"
              @click="editOpen(selectedKeys)"
            >
              编辑
            </a-button>
          </div>
          <div class="item">
            <a-button
              style="
                color: rgb(var(--success-4));
                border-color: rgb(var(--success-4));
              "
              type="outline"
              status="success"
              @click="refreshDict"
            >
              刷新数据缓存
            </a-button>
          </div>
        </template>
        <template #dictType="{ row }">
          <router-link
            :to="{ name: 'SystemDictData', params: { type: row.dictType } }"
            class="link-type"
          >
            <span>{{ row.dictType }}</span>
          </router-link>
        </template>
        <template #status="{ row }">
          <dict-tag :options="dict.sys_normal_disable" :value="row.status" />
        </template>
        <template #optional="{ row }">
          <a-button
            v-permission="'system:dict:edit'"
            type="text"
            status="success"
            @click="editOpen(row.dictId)"
          >
            编辑
          </a-button>
        </template>
      </xTable>
    </a-card>
    <EditModal
      ref="edit"
      :fields="editFields"
      :http-add="addType"
      :http-edit="updateType"
      :http-get="getType"
      @reload="refresh = true"
    >
    </EditModal>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import { addDateRange } from '@/utils/index';
  import {
    getListData,
    getType,
    addType,
    updateType,
    delType,
    refreshCache,
  } from '@/api/system/dict';
  import { dictType } from '@/api/exportFile';
  import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
  import { Message } from '@arco-design/web-vue';
  import { getDict } from '@/utils/dict';
  // 定义组件
  const edit = ref();
  const dict = getDict('sys_normal_disable');
  const selectedKeys = ref([]);
  // 定义查询字段
  const searchFileds: Array<any> = reactive([
    {
      span: 5,
      field: 'dictName',
      placeholder: '请输入字典名称',
      label: '字典名称',
      tag: 'a-input',
      initValue: '',
    },
    {
      span: 5,
      field: 'dictType',
      placeholder: '请输入字典类型',
      label: '字典类型',
      tag: 'a-input',
      initValue: '',
    },
    {
      span: 5,
      field: 'status',
      placeholder: '请选择字典状态',
      label: '字典状态',
      initValue: '',
      tag: 'a-select',
      attrs: {
        options: dict.sys_normal_disable,
      },
    },
    {
      span: 5,
      field: 'dateRange',
      label: '创建时间',
      tag: 'a-range-picker',
      initValue: [],
    },
  ]);
  // 定义表格字段
  const tableColumns: Array<TableColumnData> = reactive([
    {
      dataIndex: 'dictId',
      title: '字典编号',
    },
    {
      dataIndex: 'dictName',
      title: '字典名称',
    },
    {
      dataIndex: 'dictType',
      title: '字典类型',
      slotName: 'dictType',
    },
    {
      dataIndex: 'status',
      title: '状态',
      slotName: 'status',
    },
    {
      dataIndex: 'remark',
      title: '备注',
    },
    {
      dataIndex: 'createTime',
      title: '创建时间',
    },
    {
      dataIndex: 'optional',
      title: '操作',
      slotName: 'optional',
    },
  ]);
  const editFields: Array<any> = reactive([
    {
      key: 'dictName',
      label: '字典名称',
      placeholder: '请输入字典名称',
      tag: 'a-input',
      decorator: {
        rules: [{ required: true, message: '请输入字典名称' }],
      },
    },
    {
      key: 'dictType',
      label: '字典类型',
      placeholder: '请输入字典类型',
      tag: 'a-input',
      decorator: {
        rules: [{ required: true, message: '请输入字典类型' }],
      },
    },
    {
      key: 'status',
      label: '状态',
      placeholder: '请选择状态',
      tag: 'a-radio-group',
      decorator: {
        rules: [{ required: false, message: '请选择状态' }],
      },
      attrs: {
        options: dict.sys_normal_disable,
      },
    },
    {
      key: 'remark',
      label: '备注',
      tag: 'a-textarea',
      decorator: {
        rules: [{ required: false, message: '请输入备注' }],
      },
    },
  ]);
  const refresh = ref(true);
  // 定义表格查询参数
  const params = ref({
    dateRange: [],
  });
  // 定义搜索方法
  const search = (data: any) => {
    params.value = addDateRange(data, data?.dateRange);
    refresh.value = true;
  };
  const editOpen = (keys: any | any[]) => {
    if (Array.isArray(keys) && keys.length === 1) {
      edit.value.show(keys[0]);
    } else if (!Array.isArray(keys)) {
      edit.value.show(keys);
    } else if (Array.isArray(keys) && keys.length < 1) {
      Message.warning('必须选中一条数据');
    } else if (Array.isArray(keys) && keys.length > 1) {
      Message.warning('只能选中一条数据');
    }
  };
  const refreshDict = () => {
    refreshCache().then(({ code, msg }) => {
      if (code !== 200) {
        Message.warning(msg);
        return;
      }
      Message.info('刷新成功');
    });
  };
</script>

<style scoped lang="less">
  .operation-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 20px;
    .item {
      margin-left: 8px;
    }
  }
  .container {
    // padding: 0 20px 20px 20px;
  }
  :deep(.arco-table-th) {
    &:last-child {
      .arco-table-th-item-title {
        margin-left: 16px;
      }
    }
  }
</style>
